<template>
  <div class="statistics_container">
    <Header :title="title"></Header>
    <div class="mulu">
      <van-tabs v-model="active" @change="renderCharts()">
        <van-tab title="总应付">
          <van-swipe class="my-swipe" :autoplay="10000" indicator-color="white">
            <van-swipe-item>
              <div class="echarts_box" ref="lineNodePay"></div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="chart-box" ref="barNodePay"></div>
            </van-swipe-item>
          </van-swipe>
        </van-tab>
        <van-tab title="总应收">
          <van-swipe class="my-swipe" :autoplay="10000" indicator-color="white">
            <van-swipe-item>
              <div class="echarts_box" ref="barNodeCollection1"></div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="chart-box" ref="barNodeCollection2"></div>
            </van-swipe-item>
          </van-swipe>
        </van-tab>
      </van-tabs>
    </div>
    <main>
      <div class="weather">
        <div class="weather-user">
          <span class="avatar"></span>
          <span>尊敬的用户：{{userInfo.name}}</span>
          <span class="hello">您好！{{weather.city}}今日温度{{weather.wendu}}℃,{{weather.ganmao}}</span>
        </div>
        <van-divider
          :style="{ color: 'black', borderColor: '#1989fa', padding: '0 16px',fontSize:'18px' }"
        >未来天气预报</van-divider>
        <div class="weather-details">
          <!-- <van-grid :column-num="3">
            <van-grid-item v-for="it in weather.forecast" :key="it.data" icon="diamond" :text="it.date + it.type" />
          </van-grid>-->
          <van-card v-for="it in weather.forecast" :key="it.data" :desc=" it.type" :title="it.date">
            <template #price>
              <span>{{it.fengxiang}}</span>
            </template>
            <template #thumb>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiayu" v-if="it.type === '小雨' "/>
                <use xlink:href="#icon-yintian" v-else-if="it.type ==='中雨'"/>
                <use xlink:href="#icon-yintian" v-else-if="it.type ==='大雨'"/>
                <use xlink:href="#icon-yintian" v-else-if="it.type ==='阴'"/>
                <use xlink:href="#icon-duoyun" v-else-if="it.type ==='多云'"/>
                <use xlink:href="#icon-1baitianqing" v-else />
              </svg>
            </template>
            <template #tags>
              <span>{{it.high}}</span> --
              <span>{{it.low}}</span>
            </template>
          </van-card>
        </div>
      </div>
    </main>
  </div>
</template>
 
 <script>
import { analysisCollectionApi, analysisPayableApi } from "@/api/statistics";
import * as echarts from "echarts";
import Header from "@/components/header.vue";
import { mapState } from "vuex";
import App from "@/App.vue";
export default {
  data() {
    return {
      title: "统计",
      active: 0,
      getPayable_timer: null,
      getCollection_timer: null,
      count: 0 //点击收款统计标签次数，用于首次点击收款统计获取节点渲染图表
    };
  },
  created() {
    this.$nextTick(() => {
      // 仅在整个视图都被渲染之后才会运行的代码
      this.lineChartPay = echarts.init(this.$refs.lineNodePay);
      // 仅在整个视图都被渲染之后才会运行的代码
      this.barChartPay = echarts.init(this.$refs.barNodePay);
      this.getPayable();
    });
  },
  beforeDestroy() {
    console.log(this.getCollection_timer, this.getCollection_timer);
    clearTimeout(this.getCollection_timer);
    clearTimeout(this.getPayable_timer);
    this.active = 3;
  },
  methods: {
    renderCharts() {
      if (this.active === 1) {
        //激活收款标签时
        clearTimeout(this.getPayable_timer);
        this.count++;
        if (this.count === 1) {
          //首次激活初始化节点
          this.$nextTick(() => {
            // 仅在整个视图都被渲染之后才会运行的代码
            this.barChartCollection1 = echarts.init(
              this.$refs.barNodeCollection1
            );
            this.barChartCollection2 = echarts.init(
              this.$refs.barNodeCollection2
            );
            this.getCollection();
          });
          return;
        }
        this.getCollection();
      }
      if (this.active === 0) {
        //激活付款标签时
        clearTimeout(this.getCollection_timer);
        this.getPayable();
      }
    },
    /**
     * 获取付款相关数据
     */
    async getPayable() {
      console.log(
        "付款=----------------------------------------------------------"
      );
      let payData = await analysisPayableApi();
      if (this.active !== 0) return;
      let { data, code } = payData;
      const xlabel = []; //日期
      const total = []; //总数
      const payable = []; //未付
      const paid = []; //已付
      if (code === 200) {
        data.forEach(it => {
          xlabel.push(it.date.substring(5));
          total.push(it.total);
          payable.push(it.payable);
          paid.push(it.paid);
        });
      }
      this.getPayable_line(xlabel, total, payable, paid);
      this.getPayable_bar(xlabel, total, payable, paid);
      this.getPayable_timer = setTimeout(() => {
        this.getPayable();
      }, 4000);
      //  this.arr1.push(this.getPayable_timer)
    },
    /**
     * 获取收款相关数据
     */
    async getCollection() {
      console.log(
        "收款=----------------------------------------------------------",
        this.active
      );
      let payData = await analysisCollectionApi();
      if (this.active !== 1) return;
      let { data, code } = payData;
      const xlabel = []; //日期
      const total = []; //总数
      const receiving = []; //未收
      const received = []; //已收
      if (code === 200) {
        data.forEach(it => {
          xlabel.push(it.date.substring(5));
          total.push(it.total);
          receiving.push(it.receiving);
          received.push(it.received);
        });
      }
      this.getCollection_bar_one(xlabel, total, receiving, received);
      this.getCollection_bar_two(xlabel, total, receiving, received);
      this.getCollection_timer = setTimeout(() => {
        this.getCollection();
      }, 4000);
      // this.arr2.push(this.getPayable_timer)
    },
    /**
     * 配置总应付中第一个轮播图-线性图
     */
    getPayable_line(xlabel, total, payable, paid) {
      let option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          color: ["#F58080", "#47D8BE", "#F9A589"],
          data: ["合计", "已付", "未付"],
          left: "center",
          bottom: "bottom"
        },
        grid: {
          top: "middle",
          left: "3%",
          right: "4%",
          bottom: "3%",
          height: "80%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: xlabel,
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#DDD"
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#333"
            }
          },
          nameTextStyle: {
            color: "#999"
          },
          splitArea: {
            show: false
          }
        },
        series: [
          {
            name: "合计",
            type: "line",
            data: total,
            color: "#F58080",
            lineStyle: {
              normal: {
                width: 5,
                color: {
                  type: "linear",
                  colorStops: [
                    {
                      offset: 0,
                      color: "#FFCAD4" // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#F58080" // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#F58080" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: "rgba(245,128,128, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7
              }
            },
            itemStyle: {
              normal: {
                color: "#F58080",
                borderWidth: 10,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                                              shadowBlur: 100,*/
                borderColor: "#F58080"
              }
            },
            smooth: true
          },
          {
            name: "已付",
            type: "line",
            data: paid,
            lineStyle: {
              normal: {
                width: 5,
                color: {
                  type: "linear",
                  colorStops: [
                    {
                      offset: 0,
                      color: "#AAF487" // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#47D8BE" // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#47D8BE" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: "rgba(71,216,190, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7
              }
            },
            itemStyle: {
              normal: {
                color: "#AAF487",
                borderWidth: 10,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                                              shadowBlur: 100,*/
                borderColor: "#AAF487"
              }
            },
            smooth: true
          },
          {
            name: "未付",
            type: "line",
            data: payable,
            lineStyle: {
              normal: {
                width: 5,
                color: {
                  type: "linear",
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F6D06F" // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#F9A589" // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#F9A589" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: "rgba(249,165,137, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7
              }
            },
            itemStyle: {
              normal: {
                color: "#F6D06F",
                borderWidth: 10,
                borderColor: "#fff"
              }
            },
            smooth: true
          }
        ]
      };
      // echarts 的第二个方法--绘制方法
      this.lineChartPay.setOption(option);
    },
    /**
     * 配置总应付中第二个轮播图-柱状图
     */
    getPayable_bar(xlabel, total, payable, paid) {
      const option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true
        },
        legend: {
          data: ["合计", "未付", "已付"],
          left: "7%",
          top: "5%",
          textStyle: {
            color: "#666666"
          },
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 25
        },
        xAxis: {
          type: "category",
          data: xlabel,
          axisLine: {
            lineStyle: {
              color: "#cdd5e2"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            },
            interval: 0 //使x轴文字显示全
          }
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#cdd5e2"
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#666666"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#cdd5e2"
              }
            }
          }
        ],
        series: [
          {
            name: "合计",
            type: "bar",
            barWidth: "6px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#29acff"
                  },
                  {
                    offset: 1,
                    color: "#4bdfff"
                  }
                ]),
                barBorderRadius: 6
              }
            },
            data: total
          },
          {
            name: "未付",
            type: "bar",
            barWidth: "6px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#3d93f2"
                  },
                  {
                    offset: 1,
                    color: "#5dc1fd"
                  }
                ]),
                barBorderRadius: 6
              }
            },
            data: payable
          },
          {
            name: "已付",
            type: "bar",
            barWidth: "6px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#01c871"
                  },
                  {
                    offset: 1,
                    color: "#55f49c"
                  }
                ]),
                barBorderRadius: 6
              }
            },
            data: paid
          }
        ]
      };
      this.barChartPay.setOption(option);
    },
    /**
     * 配置总应收中第一个轮播图-柱状图
     */
    getCollection_bar_one(xlabel, total, receiving, received) {
    const option = {
    backgroundColor: '#fff',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    color: ['#22b8ed', '#ffd54f', '#fb8f8e','#8fc31f'],
    legend: {
      data: ['合计', '已收','未收'],
      align: 'right',
      right: 400,
      top: 10,
      textStyle: {
        color: '#000'
      },
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 35
    },
    grid: {
      left: '2%',
      right: '4%',
      bottom: '3%',
      backgroundColor: '#333',
      containLabel: true
    },
    // yAxis: [{
    //   type: 'value',
    //   name: '额度',
    //   axisTick: {
    //     show: false
    //   }
    // }, {
    //   type: 'category',
    //   name: '月份',
    //   data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12' ]
    // } ],
    xAxis: [{
      type: 'category',
      data: xlabel
    }],
    yAxis: [{
      type: 'value',
      name: '金额',
      axisLabel: {
        formatter: '{value}'
      }
    }],
    series: [{
      name: '合计',
      type: 'bar',
      data: total,
      barGap: '8%', // 柱图间距
      itemStyle: {
        normal: {
          barBorderRadius: [3, 3, 0, 0]
        }
      },
        markPoint: {
        data: [
           {type: 'min', name: '最小值'},
        
        ]
      },
      markLine: {
        data: [
          {type: 'average', name: '平均值'}
        ]
      }
   

    }, {
      name: '已收',
      type: 'bar',
      data: received,
      barGap: '5%', // 柱图间距
      itemStyle: {
        normal: {
          barBorderRadius: [3, 3, 0, 0]
          // color: '#000'
        }
      },
      markPoint: {
        data: [
          {type: 'min', name: '最大值'},
          
        ]
      },
      markLine: {
        data: [
          {type: 'average', name: '平均值'}
        ]
      }
    },{
      name: '未收',
      type: 'bar',
      data: receiving,
      barGap: '5%', // 柱图间距
      itemStyle: {
        normal: {
          barBorderRadius: [3, 3, 0, 0]
        }
      },
      markPoint: {
        data: [
          {type: 'max', name: '最大值'},
          
        ]
      },
      markLine: {
        data: [
          {type: 'average', name: '平均值'}
        ]
      }
    },
    ]
  };
      this.barChartCollection1.setOption(option);
    },
    /**
     * 配置总应收中第二个轮播图-柱状图
     */
    getCollection_bar_two(xlabel, total, receiving, received) {
      let option = {
        // color:['red','yellow','green'],// 手动指定柱状图颜色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
          // formatter:function(params){//悬浮提示窗
          //     var params0Value = params[0].value+"%";
          //     var params1Value = params[0].value+"%";
          //     var params2Value = params[0].value+"%";
          //     if(params[0].value<=0){params0Value = params[0].value}
          //     if(params[1].value<=0){params0Value = params[1].value}
          //     if(params[2].value<=0){params0Value = params[2].value}
          //     return params[0].axisValue+'<br />'+params[0].marker+"初始量："+params0Value+'<br />'+params[1].marker+"已确认量："+params1Value+'<br />'+params[2].marker+"草稿/待确认："+params2Value;
          // }
        },
        legend: {
          // selected:{// false时不显示对应的柱状图
          //     '初始量':true,
          //     '已确认量':true,
          //     '草稿/待确认':true
          // },
          selectedMode: false,
          data: ["合计", "已收", "未收"]
        },
        grid: {
          left: "5px",
          right: "4%",
          bottom: "45px",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisTick: false,
            data: xlabel
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: false,
            axisLabel: {
              formatter: "{value}"
            }
            // axisLine:{
            //     lineStyle:{
            //         color:'#f00',
            //         type:'dashed'
            //     }
            // },
          }
        ],
        dataZoom: [
          {
            xAxisIndex: [0],
            type: "slider",
            start: 0,
            end: 60,
            handleIcon:
              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z"
          }
        ],
        series: [
          {
            name: "合计",
            type: "bar",
            stack: "饱和度",
            barWidth: 30,
            itemStyle: { barBorderRadius: [0, 0, 30, 30] },
            data: total
          },
          {
            name: "已收",
            type: "bar",
            stack: "饱和度",
            barWidth: 30,
            data: received
          },
          {
            name: "未收",
            type: "bar",
            stack: "饱和度",
            //barMaxWidth:30,//柱子的宽度
            barWidth: 30,
            itemStyle: { barBorderRadius: [30, 30, 0, 0] },
            data: receiving
          }
        ]
      };
      // echarts 的第二个方法--绘制方法
      this.barChartCollection2.setOption(option);
    },
    onClickLeft() {
      this.$router.push("/main");
    }
  },
  computed: {
    ...mapState("common", ["userInfo", "weather"])
  },
  components: { Header, App }
};
</script>
<style lang="less" scoped>
@import "@/style/common.less";

.statistics_container {
  width: 100%;
  overflow-x: hidden;
}

.van-hairline--bottom {
  background-color: #6199ff;
}

.header/deep/ .van-nav-bar__arrow,
.header/deep/ .van-nav-bar__text,
.header/deep/ .van-nav-bar__title {
  color: #f2f2f2 !important;
  font-size: 20px;
}

.chart-box {
  display: block;
  position: relative;
  height: 100%;
}

.chart-swipe {
  display: block;
  height: 280px;
}

.mulu {
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: initial;
  justify-content: space-evenly;
  margin-bottom: 22px;
  box-shadow: 0px 1px #cdcaca;

  .van-tabs__wrap {
    background-color: transparent !important;
  }

  > van-tab {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    font-size: @16;
    margin: 0 20px;
  }
}

// 天气预报
main {
  width: 100%;
  height: 100%;

  > .weather {
    margin: 0 auto;
    padding-left: 5%;

    // 天气预报处用户头像
    > .weather-user {
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: @16;
      letter-spacing: 3px;

      > .avatar {
        margin: 0 auto;
        display: block;
        width: 100px;
        height: 100px;

        background-image: url(@/images/R-C2.png);
        background-size: 100px 100px;
      }

      > .van-icon-smile {
        color: @c1;
        font-size: 40px;
      }

      > .hello {
        letter-spacing: 5px;
        color: @c1;
      }
    }
  }
}

// 详细天气预报板块
.weather-details {
  background-color: #f1fbff;
  margin-top: 17px;
  border-top: 1px;
}

// 钻石图标（没找到合适的图片，暂时代替一下）
// 重新设置icon组件相关样式
.weather-details/deep/ .van-icon {
  font-size: 33px;
  color: #7995c7;
}

// 组件文字样式
.weather-details/deep/ .van-grid-item__text {
  font-size: 16px;
  color: #7995c7;
}

// 组件背景颜色
.weather-details/deep/ .van-grid-item__content {
  background-color: #f1fbff;
}

//标签容器
.van-tabs {
  width: 100%;
  // background: #000;
}

//轮播容器
.van-swipe-item {
  width: 100%;
  height: 300px;

  .echarts_box {
    width: 100%;
    height: 100%;
  }
}
.icon {
  width: 88px;
  height: 88px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>